<template>
	<view id="chushi">
		<view id="shuru">
			<form @submit="formSubmit">
				<view class="uni-form-item uni-column s1" id="v1">
					<image src="../../static/logo_1.png" mode=""></image>
					<input class="uni-input" name="account" placeholder="请输入账号" />
				</view>
				<view class="uni-form-item uni-column s1" id="v2">
					<image src="../../static/logo_2.png" mode=""></image>
					<input class="uni-input" name="password" password="true" placeholder="请输入密码" />
				</view>
				
				<text id="cuo1" :style="{display:hidden}">账号或者密码错误</text>
				<view class="uni-btn-v" id="v3">
					<button form-type="submit">登录</button>
				</view>
			</form>
				
			<view id="v4">
				<button @click="dian2">注册账号</button>
				<button>忘记密码</button>
			</view>
			<view id="v5">
				<view></view>
				<view>第三方账号登录</view>
				<view></view>
			</view>
			<view id="v6">
				<image src="../../static/logo_4.png" mode=""></image>
				<image src="../../static/logo_5.png" mode=""></image>
				<image src="../../static/logo_6.png" mode=""></image>
			</view>
		</view>
	<image src="../../static/logo_3.png" mode=""></image>
	</view>
</template>

<script>
	import{
		computed,
		reactive,
		toRefs,
		onMounted
	} from 'vue';
	
	import stor from '../../store/index.js'
	import http from "../../utils/http.js";
	
	
	export default {
		setup(){
			let data = reactive({
				hidden:"none",
				dian2:()=>{
					uni.navigateTo({
						url:'../register/register'
					})
				},
				formSubmit: function(e) {
					http({
						url:'/login/get',
						method:'get',
						data:{
							account:e.detail.value.account,
							password:e.detail.value.password
						}
					}).then((res)=>{
						if(res.data.code==200){
							// 存储本地缓存
							uni.setStorage({
								key: 'user1',
								data: res.data.data[0],
								success: function () {
									console.log('本地存储success');
								}
							});
							
							// 存进vuex中
							stor.commit('liujinchang/setTododata',res.data.data[0]);
							
							// 然后跳转到首页
							uni.switchTab({
								url:'../index/index'
							})
							// console.log(stor.state.liujinchang.user);
						}else{
							console.log("密码或者账号错误");
							data.hidden = "inline";
						}
					})		
								
				},
			})
			
			return{
				...toRefs(data),
			}
		}
	}
</script>

<style lang="scss">
	#cuo1{
		color: #ed5a65;
		font-size: 28rpx;
		
	}
	#chushi{
		position: relative;
	}
	#chushi>image{
		width: 750rpx;
		height: 640rpx;
	}
	#shuru{
		position: absolute;
		top: 340rpx;
		left: 55rpx;
		padding: 0 36rpx;
		padding-bottom: 48rpx;
		box-shadow: 0rpx 10rpx 40rpx 0rpx rgba(223, 223, 223, 0.91);
		background: #fff;
		border-radius: 24rpx;
		width: 640rpx;
		box-sizing: border-box;
		.s1{
			// width: 561rpx;
			height: 88rpx;
			background: #F8F8F8;
			border-radius: 44rpx;
			box-sizing: border-box;
			padding-left: 40rpx;
			display: flex;
			align-items: center;
			image{
				margin-right: 36rpx;
			}
			input{
				color: #C5C5C5;
			}
		}
		#v1{
			margin-top: 46rpx;
			image{
				width: 28rpx;
				height: 36rpx;
			}
		}
		#v2{
			margin-bottom: 24rpx;
			margin-top: 36rpx;
			image{
				width: 29rpx;
				height: 37rpx;
			}
		}
		#v3{
			margin-top: 60rpx;
			button{
				width: 561rpx;
				height: 88rpx;
				background: linear-gradient(-90deg, #006FFF, #478EEA);
				border-radius: 44rpx;
				font-size: 33rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
		#v4{
			margin-top: 48rpx;
			display: flex;
			justify-content: space-between;
			
			button{
				font-size: 24rpx;
				font-weight: 500;
				color: #666666;
				background: none;
				border: none;
				box-shadow: none;
				margin: 0 0;
			}
			button:after{
				border: none;
			}
		}
		#v5{
			margin-top: 82rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 22rpx;
			font-weight: 500;
			color: #B3B8D3;
			view:not(:nth-child(2)){
				width: 145rpx;
				height: 1rpx;
				background: #B3B8D3;
			}
			view:nth-child(2){
				margin: 0 24rpx;
			}
		}
		#v6{
			display: flex;
			justify-content: center;
			image{
				width: 143rpx;
				height: 143rpx;
			}
		}
	}
</style>
